<template class="page">
  <el-container style="height: 100vh;width: 100vw;border: 1px solid #eee">
    <!-- 左侧侧边栏 -->
    <el-aside :width="!isCollapse ? '20vw' : ''" style="background-color: black;height: 100vh">
      <assindeCom :isCollapse="isCollapse"></assindeCom>
    </el-aside>
    <!-- 右侧内容栏 -->
    <el-container :style="'width:' + !isCollapse ? '80vw' : '90vw'" style="height: 100vh">
      <el-header>
        <headerCom @changeMenu="changeMenu()"></headerCom>
      </el-header>
      <!-- 首页主内容 -->
      <div>
          <router-view></router-view>
      </div>
    </el-container>
  </el-container>
</template>
<script>
import assindeCom from "@/components/home/assindeCom.vue";
import headerCom from "@/components/home/headerCom.vue"
export default {
  components: { assindeCom, headerCom },
  name: "HomePage",
  data() {
    return {
      isCollapse: false, // 是否收回左侧栏
    }
  },
  mounted() {},
  methods: {
    // 左侧栏收缩和展开
    changeMenu() {
      this.isCollapse = !this.isCollapse
      console.log(this.isCollapse)
    }
  }
};
</script>

<style>
.el-header {
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.page {
  height: 100vh;
  width: 100vw;
}

.el-menu-item-group__title {
  color: white;
}

.cell {
  color: #333333;
}


.headclass {
  background-color: #B3C0D1 !important;
}
</style>